import Vue from 'vue'

// 注册 全局 自定义指令---------------------
// 指令配置对象中，有 3个 钩子函数：
//   bind - 拿不到父元素
//   inserted - 可以拿到父元素
//   update - dom更新之前
//   componentUpdated - dom更新之后
//   unbind - dom从dom树移出时执行，拿不到父元素了
Vue.directive('focus', {
    inserted(el) {
        el.focus()
    }
})


Vue.directive("jiaodian", {
    bind(ele, params) {
        console.log('bind-----------------')
        console.log(ele) // h1
        console.log(ele.parentNode) // null
        console.log(params.value) // 宝宝不开心
    },
    // 当 添加了本指令的 标签 加入到真实dom中时执行
    inserted(el, params) {
        console.log('inserted-------------')
        console.log(el); // h1
        console.log(el.parentNode) // div
        console.log(params.value) // 宝宝不开心
        // 设置 添加了本 指令的 表单元素 获取焦点
        el.focus()
    },
    // 当 添加了本指令的 标签 加入到真实dom中时执行
    update(el, params) {
        console.log('update---------------')
        console.log(el.innerHTML); // 昨晚去哪啦？
        console.log(params.value) // 宝宝不开心
    },
    componentUpdated(el, params) {
        console.log('componentUpdated---------------')
        console.log(el.innerHTML); // 昨晚去哪啦？
        console.log(params.value) // 宝宝不开心
    },
    unbind(el, params) {
        console.log('unbind-------------')
        console.log(el); // h1
        console.log(el.parentNode) // null
        console.log(params.value) // 宝宝不开心
    }
});